<template>
  <div class='content'>
    已经弃用，保留参考
    <!-- <div class="block" @mousedown="blockMouseDown" @mousemove="blockMouseMove" @mouseup="blockMouseUp">
      <img v-if="formData.markIcon && pictrueObj.picUrl" ref="imgBlock" class="mark-icon" :src="inFilePrefix + formData.markIcon" alt="">
      <img v-else-if="!formData.markIcon && pictrueObj.picUrl" ref="imgBlock" class="mark-icon" :src="markIcon" alt="">
      <div v-else-if="pictrueObj.picUrl" class="img-block" ref="imgBlock"></div>
      <img class="img" v-if="pictrueObj.picUrl" :src="pictrueObj.picUrl" alt="">
      <div v-if="!pictrueObj.picUrl" class="flex-bcenter both-100">
        <EmptyData description="暂无图片" />
      </div>

    </div> -->
  </div>
</template>

<script>
import exampleImage from '@/assets/images/legend/tongyong.png';
import { mapState } from 'vuex';
export default {
  name: 'PlanPosition',
  props: {
    formData: {
      type: [],
      default: () => { },
    },
    pictrue: {
      type: [],
      default: () => { },
    },
  },
  data() {
    return {
      pictrueObj: {},
      formModel: {
        positionX: null,
        positionY: null,
      },
      currentX: '',
      currentY: '',
      initialX: '',
      initialY: '',
      active: false,
      // 默认设备图标（markIcon 为null 时候使用此图片）
      markIcon: exampleImage
    };
  },
  computed: {
    ...mapState('config', ['inFilePrefix'])
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler() {
        // 连续点击列表编辑更新formData
        if (this.formData.positionX !== undefined && this.formData.positionY !== undefined) {
          this.formModel.positionX = this.formData.positionX
          this.formModel.positionY = this.formData.positionY
          this.setPosition()
        }
      }
    },
    pictrue: {
      deep: true,
      immediate: true,
      handler() {
        this.$set(this, 'pictrueObj', JSON.parse(JSON.stringify(this.pictrue)))
        if (this.pictrue.positionX !== undefined && this.pictrue.positionY !== undefined) {
          this.formModel.positionX = this.pictrue.positionX
          this.formModel.positionY = this.pictrue.positionY
          this.setPosition()
        }
      }
    },
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      this.formModel.positionX = this.formData.positionX
      this.formModel.positionY = this.formData.positionY
      if (this.$utils.isNotEmpty(this.formModel.positionY) && this.$utils.isNotEmpty(this.formModel.positionY)) {
        this.setPosition()
      }
    })
  },
  methods: {
    getForm() {
      return this.$refs.form
    },
    // 鼠标点击
    blockMouseDown(e) {

      this.initialX = e.clientX - this.formModel.positionX;
      this.initialY = e.clientY - this.formModel.positionY;

      if (e.target == this.$refs.imgBlock) {
        this.active = true
      }
    },
    // 鼠标移动
    blockMouseMove(e) {
      this.$nextTick(() => {
        if (this.active) {
          e.preventDefault();

          let xDistance = e.clientX - this.initialX
          let yDistance = e.clientY - this.initialY

          // 690 = 720 - 30(block的宽度 - 设备图标的宽度);356 = 400 - 44(block的高度 - 设备图标的高度)
          this.currentX = xDistance < 0 ? 0 : (xDistance > 690 ? 690 : xDistance);
          this.currentY = yDistance < 0 ? 0 : (yDistance > 356 ? 356 : yDistance);

          this.formModel.positionX = this.currentX
          this.formModel.positionY = this.currentY

          this.setPosition();
        }
      })
    },
    // 鼠标结束
    blockMouseUp(e) {
      this.active = false
      this.initialX = this.currentX;
      this.initialY = this.currentY;
    },
    // 设置设备位置
    setPosition() {
      let imgBlock = this.$refs.imgBlock
      if (imgBlock) {
        imgBlock.style.transform = "translate(" + this.formModel.positionX + "px, " + this.formModel.positionY + "px)";
      }
    }
  },
  components: {},
}
</script>

<style lang='less' scoped>
.content {
  width: 720px;
  height: 400px;
  overflow: auto;
}

.block {
  width: 100%;
  height: 100%;
  position: relative;

  .img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

.none {
  text-align: center;
  height: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-block {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  z-index: 1;
  position: absolute;
  cursor: move;
}

.mark-icon {
  width: 30px;
  height: 44px;
  z-index: 1;
  position: absolute;
  cursor: move;
}
</style>